/* ======= # Obsidian CSS Dark Graphite Pie ==============*/

/* Structure of theme

## Credits

## Fonts & Colors

## Inside a note 
  ### Headers
    #### Edit mode
    #### Reading mode
    #### Live Preview
  ### Plain text
    #### Edit mode
    #### Reading mode
    #### Live Preview
  ### Tags
    #### Edit mode
    #### Reading mode
    #### Live Preview
  ### Lists
    #### Edit mode
    #### Reading mode
    #### Live Preview
  ### Quotes
    #### Edit mode
    #### Reading mode
    #### Live Preview
  ### Blocks of code
    #### Edit mode
    #### Reading mode
    #### Live Preview
  ### Scroll
    #### Edit mode
    #### Reading mode
    #### Live Preview
## Local graph
## Global graph 
## The area around the note 
  ### App Ribbon
  ### File Explorer
  ### Search
  ### Outline
  ### Tag Pane
  ### Quick Switcher
  ### Command Palette
  ### Other panes
  ### Note name
## System menu

*/

/* ======= ## CREDITS ==============*/

/* Theme for wonderful [Obsidian](https://obsidian.md/) app. I would be glad if someone will like and use it.

I’m not sure if I have the right to give this theme any unique name, since I don’t know CSS and glued this theme out of the three themes I like most:

- Obsidian dark rmx by _ph: https://github.com/cannibalox/Obsdn-dark-rmx/releases (used as a starter kit)
- Obsidian Red Graphite by Seanwcom: https://github.com/seanwcom/Red-Graphite-for-Obsidian (left panel styling and colors)
- Cybertron by Nick Milo: https://github.com/nickmilo/Cybertron (colors for graph in dark theme)
- Typora Pie by kevinzhao2233: https://github.com/kevinzhao2233/typora-theme-pie (look of quotes)

Initially, I wanted to adapt the Pie theme, which I often used in Typora, but in the end the themes listed above were so good that I could not choose any one.

Since version 0.9.2 I am already making independent changes without following the changes in the listed themes. I will indicate changings in the changelog: https://github.com/ryjjin/Obsidian-Dark-Graphite-Pie-theme */


/* ======= ## Fonts & Colors ==============*/

body {
  font-size: 1rem;
  color: var(--text-normal-original);
  font-family: Source Code Pro, Fira Code, monospace;
  --font-monospace: Source Code Pro, Fira Code, monospace;
  --default-font: Source Code Pro, Fira Code, monospace;
}
.CodeMirror pre.CodeMirror-line {
  font-size: 1rem;
  font-family: Source Code Pro, Fira Code, monospace;
  color: var(--text-normal-original);
}

.theme-dark {
  --background-primary: #212121;
  --background-modifier-border: #303030;
  --background-primary-alt: #171717;
  --background-secondary: #212121;
  --background-secondary-alt: #000000;
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.85);
  --background-nav-alt: rgb(58, 62, 63);
  --background-nav-file-tag: rgb(116, 190, 247);
  --background-nav-selected:  #3e93d8;
  --background-nav: rgb(41, 44, 46);
  --text-accent: #3e93d8;
  --text-accent-hover: #2b60af;
  --text-normal: #dcddde;
  --text-normal-original: #dcddde;
  --text-muted: #999;
  --text-faint: #666;
  --text-error: #ff3333;
  --text-error-hover: #990000;
  --text-matched: #0cf32b;
  --text-on-accent: #dcddde;
  --text-selection: rgba(6, 66, 113, 0.99);
  --text-highlight-bg: rgba(26, 73, 100, 0.66);
  --text-nav-selected: rgb(255, 255, 255);
  --text-nav: rgb(190, 190, 190);
  --interactive-normal: #2a2a2a;
  --interactive-hover: #303030;
  --interactive-accent: rgb(32, 171, 233);
  --interactive-accent-rgb: 32, 171, 233;
  --interactive-accent-hover: #1da3d6;
  --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
  --scrollbar-bg: rgba(255, 255, 255, 0);
  --scrollbar-thumb-bg: rgba(81, 144, 175, 0.36);
  --accent-strong: #3e93d8;
  --accent-mild: #3e93d8;
  --bw: #ffffff;
  --graph-circle:#fcf601;
  --graph-line: #26798c;
  --graph-bg: rgb(22, 22, 22);
  --graph-text:#cccccc;
  --graphtag: #5dbcd2;
  --graph-attach: #d669bc;
  --graph-unresolved: #9e8aff;
}

.theme-light {
  --background-primary: #ffffff;
  --background-primary-alt: #f0f2f5;
  --background-secondary: rgb(57, 63, 63);
  --background-secondary-alt: rgb(203, 77, 73);
  --background-accent: #fff;
  --background-modifier-border: #ddd;
  --background-modifier-form-field: #fff;
  --background-modifier-form-field-highlighted: #fff;
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
  --background-modifier-success: #a4e7c3;
  --background-modifier-error: #e68787;
  --background-modifier-error-rgb: rgb(230, 135, 135);
  --background-modifier-error-hover: #ff9494;
  --background-modifier-cover: rgba(0, 0, 0, 0.8);
  --background-nav-alt: rgb(58, 62, 63);
  --background-nav-file-tag: rgb(203, 77, 73);
  --background-nav-selected: rgb(203, 77, 73);
  --background-nav: rgb(41, 44, 46);
  --text-accent: rgb(203, 77, 73);
  --text-accent-hover: rgb(203, 77, 73);
  --text-normal: rgb(203, 77, 73);
  --text-normal-original: #2e3338;
  --text-muted: rgb(143, 147, 143);
  --text-faint: #999999;
  --text-error: #ce2222;
  --text-error-hover: #cb2c22;
  --text-highlight-bg: rgba(240, 255, 82, 0.76);
  --text-selection: rgba(134, 202, 255, 0.99);
  --text-on-accent: #f2f2f2;
  --text-matched: #000000;
  --text-nav-selected: rgb(255, 255, 255);
  --text-nav: rgb(190, 190, 190);
  --interactive-normal: #f2f3f5;
  --interactive-hover: #e9e9e9;
  --interactive-accent: rgb(34, 182, 226);
  --interactive-accent-rgb: 34, 182, 226;
  --interactive-accent-hover: #1da3d6;
  --scrollbar-active-thumb-bg: rgb(97, 170, 221);
  --scrollbar-bg: rgba(0, 0, 0, 0);
  --scrollbar-thumb-bg: rgb(0, 0, 0);
  --accent-strong: #ff3333;
  --accent-mild: #e0a330;
  --bw: #000000;
  --graph-circle:#ec0c0c;
  --graph-line: #cccccc;
  --graph-bg: rgb(255, 255, 255);
  --graph-text:#969696;
  --graphtag: #b9ec41;
  --graph-attach: #83D4F4;
  --graph-unresolved: rgb(143, 147, 143);
}




/* ======= ## Inside a note  ==============*/

  /* ======= ### Headers ==============*/

    /* ------- #### Edit mode --------------*/

      /* Changing size/color of the header hashtags ## */
      .cm-formatting-header {
        color: var(--text-faint);
        font-size: 1rem;
      }

      .cm-header.cm-header-1 {
        font-size: 2rem;
        line-height: 40px;
      }

      div.HyperMD-header.HyperMD-header-1.cm-line {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--text-accent);
      }

      .cm-header.cm-header-2 {
        font-size: 1.6rem;
        line-height: 36px;
      }

      div.HyperMD-header.HyperMD-header-2.cm-line {
        padding-top: 14px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--text-faint);
      }

    /* ------- #### Reading mode --------------*/

      .markdown-preview-view h1 {
        font-size: 2rem;
        line-height: 40px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--text-accent);
      }

      .markdown-preview-view h2 {
        font-size: 1.6rem;
        line-height: 36px;
        padding-top: 14px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--text-faint);
      }

      .markdown-preview-view hr {
        height: 1px;
        border: none;
        background-color: var(--text-accent);
      }


    /* ------- #### Live Preview --------------*/



  /* ======= ### Plain text ==============*/



    /* ------- #### Edit mode --------------*/



    /* ------- #### Reading mode --------------*/

      .markdown-preview-view {
        color: var(--text-normal-original);
      }

    /* ------- #### Live Preview --------------*/



  /* ======= ### Tags ==============*/



    /* ------- #### Edit mode --------------*/



    /* ------- #### Reading mode --------------*/

      .tag {
        background-color: var(--text-accent);
        border: none;
        color: white !important;
        font-size: 0.7rem;
        line-height: 1.6em;
        padding: 0px 7px 1px 7px;
        text-align: center;
        text-decoration: none !important;
        display: inline-block;
        margin: 0px 4px;
        cursor: pointer;
        border-radius: 14px;
      }

      .tag:hover {
        color: white;
        background-color: var(--text-accent-hover);
      }

      .tag[href^="#obsidian"] {
        background-color: #4d3ca6;
      }

      .tag[href^="#important"] {
        background-color: red;
      }

      .tag[href^="#стартовал_проект"] {
        background-color: green;
      }

      .tag[href^="#высокий_шанс"] {
        background-color: green;
      }

      .tag[href^="#complete"] {
        background-color: green;
      }

      .tag[href^="#ожидание"] {
        background-color: orange;
      }
      .tag[href^="#идет_конкурс"] {
        background-color: orange;
      }

      .tag[href^="#средний_шанс"] {
        background-color: orange;
      }

      .tag[href^="#inprogress"] {
        background-color: orange;
      }

      .tag[href^="#daily_notes"] {
        background-color: #4d3ca6;
      }

      .tag[href^="#tasklist"] {
        background-color: #4d3ca6;
      }

      .tag[href^="#TIER1"] {
        background-color: red;
      }

      .tag[href^="#TIER2"] {
        background-color: orange;
      }

      .tag[href^="#TIER3"] {
        background-color: green;
      }

      .tag[href^="#DISQUALIFIED"] {
        background-color: gray;
      }

    /* ------- #### Live Preview --------------*/



  /* ======= ### Lists ==============*/


    /* ------- #### Edit mode --------------*/

      /* Coloring the list bullets/numbers */
      .cm-s-obsidian span.cm-formatting-list {
        color: var(--text-accent);
        font-size: 0.85rem;
        font-weight: 500;
        font-family: var(--font-monospace);
      }



    /* ------- #### Reading mode --------------*/

      /* trace indentation lines by death_au */

      .cm-hmd-list-indent .cm-tab,
      ul ul {
        position: relative;
      }

      .cm-hmd-list-indent .cm-tab::before,
      ul ul::before {
        content: "";
        border-left: 2px solid var(--background-modifier-border);  /*rgba(20,122,255,0.3);*/
        position: absolute;
      }

      .cm-hmd-list-indent .cm-tab::before {
        left: 0;
        top: -5px;
        bottom: -4px;
      }

      ul ul::before {
        left: -15px;
        top: 0;
        bottom: 0;
      }

      /*TASKLIST in Preview mode: change the color of the "checked" mark via hue-rotate filter;
      *the block has been added, since apparently in the current version of the application, by default such a filter with a different value is enabled for this block, and if the block is not added, the colors indicated in the blocks below are displayed incorrectly

      the base color used for the checklist looks like #3E93D8, is equivalent to HSL(207, 66%, 55%)
      - therefore, for a dark theme, we just need to cancel the current hue-rotate filter value, by input own value
      - for light theme we need to convert color HSL(207, 66%, 55%) to to HSL(2, 56%, 54%) (equal to RGB(207, 77, 73))

      This version works fine on Mac and Linux, but don't work on Win
      -----------------------------------------------------------------------------------
      */

      .theme-dark .markdown-preview-view .task-list-item-checkbox {
        filter: hue-rotate(360deg) brightness(120%) contrast(120%);
      }

      .theme-light .markdown-preview-view .task-list-item-checkbox {
        content: '';
        filter: hue-rotate(130deg) saturate(80%) brightness(90%) contrast(110%);
      }

      /*TASKLIST in Preview mode: how to make it not-line-through*/

      .markdown-preview-view ul > li.task-list-item.is-checked {
        text-decoration: none;
        color: #8c8c8c;
      }

    /* ------- #### Live Preview --------------*/

    input.task-list-item-checkbox {
      filter: hue-rotate(130deg) saturate(80%) brightness(90%) contrast(110%);
    }
    

  /* ======= ### Quotes ==============*/



    /* ------- #### Edit mode --------------*/

      .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
        position: relative;
        border: none;
        border-left: 2px solid var(--text-accent);
        background-color: var(--background-primary-alt);
        color: #8c8c8c;
        font-style: normal;
        text-indent: 0;;
      }

    /* ------- #### Reading mode --------------*/

      /* Add quotation character before quote */
      /*--- 引用块 ---*/

      blockquote {
        position: relative;
        border: none;
        border-left: 2px solid var(--text-accent);
        color: #8c8c8c;
        font-style: normal;
        padding: 1em 1em 1em;
        margin: 1em 1em 1em;
        line-height: 1.6;
        text-indent: 0;
      }

      blockquote blockquote {
        padding-right: 0;
      }
      
      blockquote a {
        color: var(--text-accent);
      }
      
      blockquote:before {
        content: '“';
        position: relative;
        left: 0px;
        top: 0;
        color: var(--text-accent);
        font-size: 2rem;
        font-family: Source Code Pro, monospace;
        line-height: 1em;
        font-weight: 700;
      }

    /* ------- #### Live Preview --------------*/



  /* ======= ### Blocks of code ==============*/

    /* ------- #### Edit mode --------------*/

      /* color of inline code */
      .cm-s-obsidian span.cm-inline-code {
        color: var(--text-accent);
        text-align: left;
      }

    /* ------- #### Reading mode --------------*/

      /* color and border of inline code (between the ticks) */
      .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code),
      .markdown-preview-section code {
        background-color: var(--background-inline-code);
        border: 0px solid var(--border-inline-code);
        padding: 4px 4px;
        font-weight: 600;
        color: var(--text-accent);
      }

    /* ------- #### Live Preview --------------*/

      /*========= remove rounded corners =======*/

      .workspace-tab-header.is-active {
        border-radius: 0px;
      }

      .workspace-tab-container-before.is-before-active .workspace-tab-header-inner,
      .workspace-tab-header.is-before-active .workspace-tab-header-inner {
        border-radius: 0px;
      }

      .workspace-tab-container-after.is-after-active .workspace-tab-header-inner,
      .workspace-tab-header.is-after-active .workspace-tab-header-inner {
        border-bottom-left-radius: 0px;
      }
      .workspace-split.mod-root > .workspace-leaf:first-of-type .workspace-leaf-content,
      .workspace-split.mod-left-split .workspace-tabs .workspace-leaf {
        border-top-left-radius: 0px;
      }

      .workspace-split.mod-right-split .workspace-tabs .workspace-leaf {
        border-top-right-radius: 0px;
      }

      /*======= flat status bar ====*/

      .status-bar {
        background-color: var(--background-nav);
        border-top: 0px solid var(--background-modifier-border);
        color: var(--text-accent);
      }

  /* ======= ### Scroll ==============*/



    /* ------- #### Edit mode --------------*/



    /* ------- #### Reading mode --------------*/



    /* ------- #### Live Preview --------------*/



/* ======= ## Local graph ==============*/



/* ======= ## Global graph  ==============*/

.graph-view.color-fill {
  color: var(--graph-circle);
}

.graph-view.color-circle {
  color: var(--graph-circle);
}

.graph-view.color-line {
  color: var(--graph-line);
}

.graph-view.color-text {
  color: var(--graph-text);
}

.graph-view.color-fill-highlight {
  color: var(--interactive-accent);
}

.graph-view.color-line-highlight {
  color: rgb(var(--interactive-accent-rgb));
}

.graph-view.color-fill-tag {
  color: var(--graphtag) !important;
}
.graph-view.color-fill-attachment {
  color: var(--graph-attach) !important;
}
.graph-view.color-fill-unresolved {
  color: var(--graph-unresolved);
  opacity: 1;
}
.graph-view.color-arrow {
  color: var(--graph-line);
  opacity: 1;
}
.graph-controls {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 10px 8px 0px;
  background-color: var(--background-primary-alt);
  min-width: 100px;
  max-width: 240px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 0px;
  max-height: calc(100% - 16px);
  overflow: auto;
}
.graph-controls-button.mod-close svg,
.graph-controls-button.mod-reset svg {
  width:12px;
  height:12px;
}
.graph-controls-button.mod-open svg {
  width:14px;
  height:14px;
}
.graph-controls.is-close {
  min-width: inherit;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 6px 8px 2px 8px;
}
.graph-controls.is-close svg {
  color:var(--text-muted);
}
.collapsible-item-children {
  margin-left: 8px;
}
.graph-controls input[type='text'],
.graph-controls input[type='range'] {
  width: 100%;
  font-size: 0.65rem;
}
.graph-controls .setting-item {
  padding: 7px 0;
}
.graph-controls .setting-item.mod-slider .setting-item-control,
.graph-controls .setting-item.mod-search-setting .setting-item-control {
  padding-top: 0px;
}
.graph-controls .setting-item.mod-toggle .setting-item-control {
  padding-top: 0;
  margin-top: 0px;
}
.graph-controls .setting-item-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: inline-block;
}
.setting-item-description {
  color: var(--text-muted);
  font-size: 0.75rem;
}
.setting-item {
  border-top: none;
  color: var(--text-muted);
}
.graph-controls .collapsible-item-children {
  margin-top: 0px;
}
.graph-control-section-header {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-normal);
}
.graph-control-section:not(:last-child) .collapsible-item-children {
  margin-top: 0px;
  margin-bottom: 2px;
  border-bottom: none;
}
.graph-controls .setting-item {
  padding: 0px 0 0px 0;
}
.graph-controls input[type='range'] {
  -webkit-appearance: none;
  background-color: var(--background-modifier-border);
  border-radius: 2px;
  height: 2px;
}
.graph-controls input[type='range']::-webkit-slider-thumb {
  width: 13px;
  height: 9px;
  border-radius: 20%;
  border-left: 4px solid var(--text-accent2);
  cursor: pointer;
  top: -2px;
}
.graph-controls .checkbox-container {
  cursor: pointer;
  background-color: var(--text-faint);
  border-radius: 3px;
  display: inline-block;
  height: 12px;
  position: relative;
  top: 6px;
  user-select: none;
  width: 26px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border 0.15s ease-in-out, opacity 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.graph-controls .checkbox-container.is-enabled {
  background-color: var(--interactive-accent);
}
.graph-controls .checkbox-container:after {
  pointer-events: none;
  content: '';
  display: block;
  position: absolute;
  background-color: var(--text-on-accent);
  width: 12px;
  height: 10px;
  margin: 1px 2px 1px 3px;
  border-radius: 2px;
  transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out, -webkit-transform 0.15s ease-in-out;
  left: -4px;
  transform: translate3d(3px, 0, 0);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
}
.graph-controls .checkbox-container.is-enabled:after {
  transform: translate3d(14px, 0, 0);
}
.view-content > iframe {
  background-color: var(--graph-bg);
}
/*==== codemirror line numbers gutter edit mode ====*/

.cm-s-obsidian .CodeMirror-linenumber {
  color: var(--text-accent);
  opacity: 0.3;
  font-size: 0.875rem;
  font-family: Source Code Pro, monospace;
}

.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}

.CodeMirror-linenumber {
  padding: 0 3px 0 0px;
  min-width: 20px;
  text-align: right;
  white-space: nowrap;
}



/* ======= ## The area around the note  ==============*/

  /* ======= ### App Ribbon ==============*/

    .workspace-ribbon {
      background-color: var(--background-nav-alt);
    }

    .workspace-ribbon.side-dock-ribbon.mod-left {
      background-color: var(--background-nav);
    }

    .workspace-tab-header-container {
      background-color: var(--background-nav);
    }

    .workspace-tab-container-before.is-before-active .workspace-tab-header-inner, .workspace-tab-container-after.is-after-active .workspace-tab-header-inner, .workspace-tab-header.is-before-active .workspace-tab-header-inner, .workspace-tab-header.is-after-active .workspace-tab-header-inner {
      background-color: var(--background-nav);
    }

  /* ======= ### File Explorer ==============*/

    /* The name of the vault */
    .nav-folder.mod-root > .nav-file-title, .nav-folder.mod-root > .nav-folder-title {
      display: none;
    }

    .nav-file-tag {
      background-color: var(--background-nav);
    }

    .nav-file-title-content, .nav-folder-title-content  {
        color: var(--text-nav);
        font-size: 0.8rem;
    }

    .nav-file-title.is-active, .nav-folder-title.is-active {
      background-color: var(--background-secondary-alt);
      color: var(--text-on-accent);
    }

    .nav-file-title-content:hover, .nav-folder-title.hover {
      background-color: var(--background-secondary-alt);
      color: var(--text-on-accent);
    }

    body.is-grabbing {
      background-color: var(--background-secondary-alt);
      color: var(--text-on-accent);
      font-size: 0.875em;
    }
    
  /* ======= ### Search ==============*/

    .workspace-leaf-content[data-type='search'] .search-result-file-matches {
      color: var(--text-nav);
      font-size: 0.8rem;
    }

    .tree-item-flair {
      background-color: var(--interactive-accent);
      color: var(--text-on-accent);
    }

    .nav-action-button.is-active {
      background-color: var(--background-nav);
      color: var(--text-on-accent);
    }

    .search-input-container input {
      font-size: 0.8rem;
      color: var(--text-normal-original);
    }

  /* ======= ### Outline ==============*/

    .tree-item-inner {
      font-size: 0.8rem;
    }

  /* ======= ### Tag Pane ==============*/



  /* ======= ### Quick Switcher ==============*/

    .suggestion-item {
      color:var(--text-faint);
      font-size: 0.875rem;
    }

    .nav-file-title.is-being-dragged,
    .nav-file-title.is-active,
    div.collapsible-item-self.tag-pane-tag.pane-list-item.is-clickable:hover,
    div.tag-pane-tag.pane-clickable-item.pane-list-item:hover,
    div.collapsible-item-self.is-clickable:hover,
    div.tree-item-self.tag-pane-tag.is-clickable:hover,
    div.tree-item-self.is-clickable:hover,
    .suggestion-item.is-selected,
    div.suggestion-note.is-selected,
    body:not(.is-grabbing) .nav-file-title.is-active:hover {
      background-color:var(--background-nav-selected);
      color:var(--text-nav-selected);
    }

  /* ======= ### Command Palette ==============*/



  /* ======= ### Other panes ==============*/



  /* ======= ### Note name ==============*/

    .workspace-leaf.mod-active .view-header-title {
      color: var(--text-normal-original);
      font-size: 0.95rem;
    }

    /* Font adjustments for pane headers */
    .view-header-title {
      font-size: 0.95rem;
      font-weight: 600;
    }

    .workspace-leaf.mod-active .view-header {
      background-color: var(--background-primary-alt);
      border-bottom: 2px solid var(--interactive-accent);
  }

  /* ======= ## System menu  ==============*/

    .vertical-tab-header {
      background-color: var(--background-nav);
    }

    .horizontal-tab-nav-item, .vertical-tab-nav-item {
      background-color: var(--background-nav);
      color: var(--text-muted);
      padding: 10px 6px 10px 24px;
      cursor: default;
      font-size: 16px;
    }

    .setting-item-name, .modal-title {
      color: var(--text-muted);
    }

    .modal {
      background-color: var(--background-secondary);
      border: 1px solid var(--background-modifier-box-shadow);
    }

    .community-plugin-search, .community-plugin-search-results {
      background-color: var(--background-secondary);
    }

    .modal button:not(.mod-cta):not(.mod-warning), .modal.mod-settings button:not(.mod-cta):not(.mod-warning), .setting-hotkey.mod-empty {
      background-color: var(--background-modifier-box-shadow);
      color: var(--text-muted);
    }

    .setting-hotkey {
      background-color: var(--graph-attach);
      color: var(--text-normal-original);
    }

    .community-plugin-item {
      background-color: var(--background-secondary);
      color: var(--text-muted);
    }

    .community-plugin-name {
      font-weight: bold;
    }

    .community-plugin-info, .community-plugin-readme {
      color: var(--text-muted);
    }

    .vertical-tab-content {
      background-color: var(--background-secondary);
      color: var(--text-muted);
    }

    .setting-item-control select {
      color: var(--text-normal-original);
    }

    .community-theme {
      background-color: var(--background-primary-alt);
      color: var(--text-muted);
    }

/* ======= ## Common Plugins  ==============*/

.kanban-plugin__lane-header-wrapper {
  background-color: var(--background-primary-alt);
  background: var(--background-primary-alt);
  line-height: 1.6em;
}


